<template>
    <a-modal :title="$t('设置存储池')" v-model='isShow' width='480px' :maskClosable='false' v-dragModal>
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-spin :spinning="loading">
                <a-form-model-item :label="$t('存储池')" prop="data_pool">
                    <a-select v-model="form.data_pool" :placeholder="$t('Choose') + $t('存储池')">
                        <a-select-option v-for="item of poolList" :value="item.poolnum" :key="item.poolnum">
                            {{ item.poolname }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
            </a-spin>
        </a-form-model>
        <template slot="footer">
            <a-button key="back" @click="handleClose">
                {{ $t('Cancel') }}
            </a-button>
            <a-button key="submit" type="primary" :loading="loading" @click="handleCreate">
                {{ $t('Sure') }}
            </a-button>
        </template>
    </a-modal>
</template>

<script>
export default {
    data() {
        return {
            isShow: false,
            loading: false,
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            form: {
                fs_name: '',
                dir_name: '',
                data_pool: undefined,
            },
            rules: {
                data_pool: [
                    { required: true, message: this.$t('Choose') + this.$t('存储池'), trigger: 'change' },
                ],
            },
            poolList: [],
        };
    },
    methods: {
        async getList() {
            this.loading = true
            const { data } = await this.$api.areaManage.getPoolRequest({ applications: ['cephfs'] })
            this.poolList = data
            this.loading = false
        },
        handleCreate() {
            this.$refs.ruleForm.validate(async valid => {
                if (valid) {
                    this.loading = true
                    const { data } = await this.$api.directory.poolDirectoryApi(this.form)
                    this.model(data.id) //返回模板
                    this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag == '0') {
                        this.$emit('get-list', this.form.dir_name, true)
                        this.handleClose()
                    }
                    this.loading = false
                } else {
                    return false;
                }
            });
        },
        handleClose() {
            this.$refs['ruleForm'].resetFields();
            this.isShow = false
        },
        handleChoose() {
            this.$refs.directoryRef.isShow = true
        },
        chooseDirectory(item) {
            console.log('item', item)
        },
    }
}
</script>
